<template>
  <q-dialog v-model="visible" seamless position="right">
    <q-card style="width: 13rem" class="overflow-hidden">
      <q-card-section class="row items-center no-wrap">
        <div class="text-h6 text-grey">查看机器人</div>
        <q-space />
        <q-btn flat round icon="close" v-close-popup />
      </q-card-section>
      <q-separator />
      <q-scroll-area style="height: 50vh" class="full-width">
        <q-card-section>
          <q-list bordered separator class="rounded-borders">
            <q-item v-if="devicesList.length === 0">
              <q-item-label style="margin: auto; color: #9e9e9e"
                >暂无机器人</q-item-label
              >
            </q-item>
            <q-item
              v-else
              clickable
              v-ripple
              :active="robot === index"
              @click="focus(item, index)"
              active-class="bg-teal-2 text-black"
              v-for="(item, index) in devicesList"
              v-bind:key="index"
              :style="item.centerConnected ? '' : 'color: #CCCCCC;'"
            >
              <q-item-section class="relative-position">
                <q-item-label
                  lines="1"
                  class="text-bold text-subtitle1"
                  :style="'color: ' + robotColor[index % 6]"
                  >{{ item.device }}</q-item-label
                >
                <q-item-label>{{
                  amrTypes[item.type] || item.type
                }}</q-item-label>
                <q-item-label>{{ item.model }}</q-item-label>
                <q-item-label>优先度：{{ item.priority }}</q-item-label>
                <q-item-label
                  :class="statusColor[item.status]"
                  v-if="item.centerConnected"
                  >状态：{{ item.status }}</q-item-label
                >
                <q-item-label style="color: #cccccc" v-else
                  >状态：{{ item.status }}</q-item-label
                >
                <div class="absolute-center" v-if="!item.centerConnected">
                  <div
                    class="display-item"
                    :class="robot === index ? 'text-bold text-red-6' : ''"
                  >
                    已掉线
                  </div>
                </div>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>
      </q-scroll-area>
      <q-separator />
      <q-slide-transition v-if="devicesList.length !== 0">
        <div v-if="selected !== undefined">
          <q-card-section class="q-gutter-y-sm">
            <q-btn-dropdown
              label="前往最近的"
              color="primary"
              class="full-width"
              icon="send"
            >
              <q-list>
                <q-item
                  clickable
                  v-close-popup
                  @click="sendAmr('move-type', 'charger')"
                >
                  <q-item-section>
                    <q-item-label>充电桩</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-close-popup
                  @click="sendAmr('move-type', 'standby')"
                >
                  <q-item-section>
                    <q-item-label>待命点</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-close-popup
                  @click="sendAmr('move-type', 'parking-spot')"
                >
                  <q-item-section>
                    <q-item-label>停车位</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
            <q-btn
              icon="clear"
              color="primary"
              class="full-width"
              label="清空机器人队列"
              @click="sendAmr('clear')"
            />
            <q-btn
              v-if="selected.status === 'running'"
              icon="pause"
              color="primary"
              class="full-width"
              label="暂停运动"
              @click="sendAmr('pause')"
            />
            <q-btn
              v-if="selected.status === 'pause'"
              icon="play_arrow"
              color="primary"
              class="full-width"
              label="继续运动"
              @click="sendAmr('resume')"
            />
            <q-btn
              v-if="selected.status === 'idle' && !selected.cmdFinish"
              icon="start"
              color="secondary"
              class="full-width text-bold"
              label="重新发送指令"
              @click="sendAmr('execute-first')"
            />
            <q-btn
              v-if="selected.status === 'error'"
              icon="cached"
              color="secondary"
              class="full-width text-bold"
              label="错误状态复位"
              @click="sendAmr('reset')"
            />
          </q-card-section>
        </div>
        <div v-else class="q-gutter-y-sm">
          <q-card-section class="q-gutter-y-sm">
            <q-btn-dropdown
              label="全部返回"
              color="primary"
              class="full-width"
              icon="send"
            >
              <q-list>
                <q-item
                  clickable
                  v-close-popup
                  @click="allBackToType('charger')"
                >
                  <q-item-section>
                    <q-item-label>充电桩</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-close-popup
                  @click="allBackToType('standby')"
                >
                  <q-item-section>
                    <q-item-label>待命点</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-close-popup
                  @click="allBackToType('parking-spot')"
                >
                  <q-item-section>
                    <q-item-label>停车位</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
            <q-btn
              icon="pause"
              class="full-width"
              color="primary"
              outline
              label="全部暂停"
              @click="broadcast('pause')"
            />
            <q-btn
              icon="play_arrow"
              class="full-width"
              color="primary"
              outline
              label="全部继续"
              @click="broadcast('resume')"
            />
          </q-card-section>
        </div>
      </q-slide-transition>
    </q-card>
  </q-dialog>
</template>

<script>
import { ref, inject, computed, watch } from "vue";
import { useAPIStore } from "stores/api/index.js";
import { api } from "boot/axios.js";
import { useQuasar } from "quasar";

const statusColor = {
  idle: "text-secondary",
  running: "text-primary",
  pause: "text-bold text-warning",
  error: "text-bold text-negative",
};

const robotColor = ref([
  "#1E90FF",
  "#EE82EE",
  "#40E0D0",
  "#3CB371",
  "#FFFF00",
  "#FF6347",
]);

export default {
  name: "AmrInMap",
  setup() {
    const $q = useQuasar();
    const mapId = inject("mapId");
    // 设备数据
    const devicesList = inject("devicesList");
    const visible = ref(false);

    const mapFunction = inject("mapFunction");
    watch(mapFunction, (value) => {
      if (value !== "amrInMap") visible.value = false;
    });

    // 选中的设备
    const robot = ref("");
    const pixiMap = inject("pixiMap");
    const selected = computed(() => devicesList.value[robot.value]);

    const amrTypes = {};
    inject("amrTypes").forEach((item) => {
      amrTypes[item.value] = item.label;
    });
    return {
      visible,
      robot,
      selected,
      devicesList,
      statusColor,
      robotColor,
      show() {
        robot.value = "";
        mapFunction.value = "amrInMap";
        visible.value = true;
      },
      focus(item, index) {
        robot.value = index;
        pixiMap.lookAt({
          x: item.x,
          y: item.y,
        });
      },
      amrTypes,
      sendAmr(type, content) {
        api
          .get(useAPIStore().centerUrl + "center/send", {
            params: { device: selected.value.device, type, content },
          })
          .then((rs) => {
            if (rs.data === "done")
              $q.notify({ type: "positive", message: "指令已下发" });
          });
      },
      allBackToType(poseType) {
        $q.dialog({
          title: "全部返回",
          message: "是否要让所有机器人返回" + poseType + "？",
          cancel: true,
        }).onOk(() => {
          api
            .get(useAPIStore().centerUrl + "center/broadcast", {
              params: {
                type: "move-type",
                content: poseType,
                mapID: mapId.value,
              },
            })
            .then((rs) => {
              $q.notify({
                type: "positive",
                message: "已向" + rs.data + "台机器人发送指令",
                position: "bottom",
              });
            });
          api
            .get(useAPIStore().centerUrl + "navigation/deadlock/clear")
            .then((rs) => {
              if (rs.data === "done")
                $q.notify({ type: "positive", message: "已清除当前死锁" });
            });
        });
      },
      broadcast(type) {
        $q.dialog({
          title: "广播指令",
          message: "是否要广播" + type + "指令？",
          cancel: true,
        }).onOk(() => {
          api
            .get(useAPIStore().centerUrl + "center/broadcast", {
              params: { type, content: "", mapID: mapId.value },
            })
            .then((rs) => {
              $q.notify({
                type: "positive",
                message: "已向" + rs.data + "台机器人发送指令",
                position: "bottom",
              });
            });
        });
      },
    };
  },
};
</script>
<style lang="css">
.display-item {
  color: #999;
  font-size: 20px;
  transform: rotateZ(-45deg);
}
</style>
